<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="header">
            <span>会员总数</span>
            <el-tag class="ml-2" type="success">全平台</el-tag>
          </div>

          <div class="font">
            <div class="centre">
              <p> <count-to :startVal="0" :endVal="24086" :duration="3000"></count-to></p>
            </div>

            <div class="below">
              <p>今日订单数</p>
              <p>1单</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="header">
            <span>订单总数</span>
            <el-tag class="ml-2" type="success">全平台</el-tag>
          </div>

          <div class="font">
            <div class="centre">
              <p> <count-to :startVal="0" :endVal="3480" :duration="2000"></count-to></p>
            </div>

            <div class="below">
              <p>今日订单数</p>
              <p>23单</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="header">
            <span>总金额</span>
            <el-tag class="ml-2" type="success">全平台</el-tag>
          </div>

          <div class="font">
            <div class="centre">
              <p> <count-to :startVal="0" :endVal="43070" :duration="3000"></count-to></p>
            </div>

            <div class="below">
              <p>今日订单数</p>
              <p>1单</p>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <div class="header">
            <span>商品总数</span>
            <el-tag class="ml-2" type="success">全平台</el-tag>
          </div>

          <div class="font">
            <div class="centre">
              <p> <count-to :startVal="0" :endVal="8" :duration="500"></count-to></p>
            </div>

            <div class="below">
              <p>今日订单数</p>
              <p>27单</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="3">
        <div
          class="grid-content ep-bg-purple divBox"
          @click="$router.push('/itemLists')"
        >
          <p class="iconfont icon-a-gouwugouwudai"></p>
          <span>商品管理</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div
          class="grid-content ep-bg-purple divBox"
          @click="$router.push('/userInfo')"
        >
          <p class="iconfont icon-geren"></p>
          <span>会员管理</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content ep-bg-purple divBox">
          <p class="iconfont icon-wodedingdan"></p>
          <span>订单管理</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content ep-bg-purple divBox">
          <p class="iconfont icon-juan"></p>
          <span>电子券管理</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content ep-bg-purple divBox">
          <p class="iconfont icon-kapian"></p>
          <span>营销管理</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content ep-bg-purple divBox">
          <p class="iconfont icon-youji"></p>
          <span>分销管理</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content ep-bg-purple divBox">
          <p class="iconfont icon-a-wanchengjilu"></p>
          <span>财务管理</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content ep-bg-purple divBox">
          <p class="iconfont icon-caozuoruanjian-12"></p>
          <span>门店管理</span>
        </div>
      </el-col>
    </el-row>

    <div ref="echarts" style="width: 100%; height: 400px"></div>

    <div class="asd">
      <baidu-map
        class="map"
        ak="Zg05F93piISuyYB8Sm0Ob7GEGDoeSFDu"
        v="3.0"
        type="API"
        :center="{ lng: 117.23344, lat: 31.82658 }"
        :zoom="15"
      >
      </baidu-map>

      <div id="container" style="width: 50%; height: 600px"></div>
    </div>

    <div style="width: 800px; height: 600px" ref="chartsDOM"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { BaiduMap } from 'vue-baidu-map-3x'
import getGuangXiMap from '@a/getGuangXiMap'
import { CountTo } from 'vue3-count-to'
export default {
  name: 'DashBoard',
  data () {
    return {
      myChart: null,
      map: null
    }
  },
  methods: {
    container () {
      const map = new AMap.Map('container', {
        zoom: 11, // 级别
        center: [117.23344, 31.82658], // 初始化地图中心点
        viewMode: '3D'// 使用3D视图
      })

      this.map = map
    },
    isecharts () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.echarts)
      this.myChart = myChart

      const option = {
        title: [

          {
            text: ['商品分析'],
            textStyle: {
              fontWeight: 'lighter',
              fontSize: 14
            }
          },
          {
            text: ['本月成交额'],
            left: '38%',
            textAlign: 'middle',
            textStyle: {
              fontWeight: 'lighter',
              fontSize: 14
            }
          },
          {
            text: ['本月订单数'],
            left: '70%',
            textAlign: 'middle',
            textStyle: {
              fontWeight: 'lighter',
              fontSize: 14
            }
          }

        ],
        grid: [
          { x: '38%', y: '20%', width: '25%', height: '60%' }, // 折线图位置控制
          { x: '70%', y: '20%', width: '25%', height: '60%' }
        ],
        xAxis: [
          {
            gridIndex: 0,
            type: 'category',
            nameLocation: 'center',
            data: ['03-01', '03-02', '03-06', '03-07', '03-08', '03-09', '03-11', '03-12', '03-13']
          },
          {
            gridIndex: 1,
            left: '70%',
            type: 'category',
            nameLocation: 'center',
            data: ['03-01', '03-02', '03-06', '03-07', '03-08', '03-09', '03-11', '03-12', '03-13']
          }
        ],
        yAxis: [
          { gridIndex: 0 },
          { gridIndex: 1 }
        ],
        legend: {
          bottom: 10,
          left: 25
        },
        color: ['#5AB1EF', '#B6A2DE', '#2EC7C9'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b0}<br/>pageA:{c0}'
          // formatter: '{a}- <br/>{b}:{c} 元'
          // valueFormatter: value => value + '件'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '商品分析',
            type: 'pie',
            radius: '60%',
            center: ['18%', '50%'],
            left: ['left'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 2, name: '彩印' },
              { value: 43, name: '打印复印' },
              { value: 55, name: '广告印刷' }
            ]
          },
          {
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            smooth: true,
            data: [120, 118, 195, 4, 42, 1, 1, 26, 2]
          },
          {
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            smooth: true,
            data: [2, 1, 5, 4, 5, 2, 1, 6, 9]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    GuangXiMap () {
      // 初始化统计图对象
      const myChart = echarts.init(this.$refs.chartsDOM)
      // 显示 loading 动画
      myChart.showLoading()
      // 再得到数据的基础上，进行地图绘制
      getGuangXiMap.then(res => {
      // 得到结果后，关闭动画
        myChart.hideLoading()
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap('GX', res.data)
        const option = {
          series: [
            {
              name: '合肥',
              type: 'map',
              map: 'GX', // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
              label: {
                show: true
              }
            }
          ]
        }
        myChart.setOption(option)
      })
    }
  },
  mounted () {
    this.isecharts()
    this.container()
    this.GuangXiMap()
  },
  components: {
    BaiduMap,
    CountTo
  }
}
</script>

<style lang="scss" scoped>
.divBox {
  width: 135px;
  height: 105px;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  p {
    font-size: 32px;
    text-align: center;
  }
  span {
    display: block;
    margin-top: 15px;
    font-size: 12px;
    text-align: center;
  }
  .icon-a-gouwugouwudai {
    color: #69c6ff;
  }
  .icon-geren {
    color: #95de64;
  }
  .icon-wodedingdan {
    color: #ff9c6e;
  }
  .icon-juan {
    color: #b37feb;
  }
  .icon-kapian {
    color: #ffd666;
  }
  .icon-youji {
    color: #5cdbd3;
  }
  .icon-a-wanchengjilu {
    color: #ff85c0;
  }
  .icon-caozuoruanjian-12 {
    color: #ffc069;
  }
}
.el-row {
  display: flex;
  justify-content: space-between;
}
.asd {
  display: flex;
  justify-content: space-between;
}

.map {
  width: 50%;
  height: 600px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  border: 1px solid #ddd;

  .header {
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px 0 18px;
    border-bottom: 1px solid #ddd;

    span {
      font-size: 12px;
    }
  }

  .font {
    padding: 0 18px 0 18px;

    .centre {
      p {
        font-size: 30px;
        margin: 20px 0 20px 0;
      }
    }

    .below {
      border-top: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      padding: 25px 0 25px 0;
    }
  }
}
</style>
